import styles from "./dialog-message.module.scss"
import {useLocation, useParams} from "react-router";
import {useEffect, useState} from "react";
import {Message, MessageDirection, MessageRole, MessageType} from "@/types/chat";
import {DialogMessageItem} from "@/app/components/dialog/dialog-message-item";
import {DialogMessageInput} from "@/app/components/dialog/dialog-message-input";
import {createNewMessage, userChatStore} from "@/app/store/chat-store";
import {useScrollToBottom} from '@/app/hooks/useScrollToBottom';

export function DialogMessage() {
    const chatStore = userChatStore();
    const currentSession = chatStore.currentSession();
    // 通过 React Router 的 useParams钩子 获取路由参数，这里是获取 id。
    const {id} = useParams();

    // 使用 React Router 的 useLocation钩子 获取当前路由的 location 对象。
    const location = useLocation();
    const title = location.state?.title || "新的对话"

    // （状态管理）存储数据使用 useState 钩子管理状态，定义了 messages 用于存储聊天消息的数组。
    const [messages, setMessages] = useState<Message[]>([])
    // 处理自动滚动和手动滚动的实现
    const {scrollRef, setAutoScroll, scrollToBottom} = useScrollToBottom();
    // （数据获取）定义获取消息接口fetchDetail 函数用于模拟异步数据获取，实际上只是设置了一些模拟的聊天消息，并通过 setMessages 更新组件的状态。

    const fetchDetail = async () => {
        // await等待异步函数返回结果在向下执行
        const session = await chatStore.currentSession()
        // 使用了可选链（optional chaining）操作符 (?.)，它的作用是在 session 不为 null 或 undefined 时才访问 messages 属性。如果 session 为 null 或 undefined，那么 messages 将为 undefined。
        const message = session?.messages
        setMessages(message)
    }
    // 生命周期数据管理
    // 刷新数据 [id] 表示当 id 属性发生变化时，就会触发 useEffect 中的函数。这确保了在组件挂载时和 id 发生变化时都会调用 fetchDetail 函数，实现了在不同条件下刷新数据的效果。
    useEffect(() => {
        fetchDetail().then(res => {
        })
    })
    // 定义消息输入事件 回调获取输入的内容值
    const onEnter =async (value: string) => {

        // todo 发送消息 更新状态 调用API文档SDK 模拟回复
        const message = createNewMessage(value, MessageRole.user)
        await chatStore.onSendMessage(message);
    }

    const clearContextIndex =
        // currentSession.clearContextIndex ?? -1 表示如果 currentSession.clearContextIndex 为 null 或 undefined，则使用 -1 作为默认值
        (currentSession.clearContextIndex ?? -1) >= 0 ? currentSession.clearContextIndex! : -1;


    return (
        <div className={styles.wrapper}>
            {/*  头部区域 title*/}
            <div className={styles.header}>{title}</div>
            {/*  展示消息 */}
            <div className={styles.scroll} ref={scrollRef}>
                {
                    // messages?.map 中的问号（?）是可选链运算符，它的主要作用是在 messages 不为 null 或 undefined 时才执行 map 方法。
                    messages?.map(
                        (message, index) => {
                            const shouldShowClearContextDivider = index === clearContextIndex - 1;
                            return <>
                                <DialogMessageItem message={message} key={index} parentRef={scrollRef}/>
                                {shouldShowClearContextDivider && <ClearContextDivider/>}
                            </>
                        }
                    )
                }

            </div>
            {/*  输入信息 */}
            <DialogMessageInput onEnter={onEnter}/>
        </div>
    )
}

/**
 * 清除上下文对话信息
 * @constructor
 */
function ClearContextDivider() {
    const chatStore = userChatStore();
    return (
        <div
            className={styles["clear-context"]}
            onClick={() =>
                chatStore.updateCurrentSession(
                    (session) => (session.clearContextIndex = undefined),
                )
            }
        >
            <div className={styles["clear-context-tips"]}>上下文已清除</div>
        </div>
    )

}